<!DOCTYPE html>

<html>

<head>
    <title>DSL IDE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/static/icon/icon.svg" rel="icon" type="image/x-icon">
    <style>
        body {
            position: absolute;
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        
        .header {
            text-align: center;
            font-size: 1.5rem;
            margin-top: 10px;
            font-weight: bolder;
        }
        
        .main {
            text-align: right;
            position: absolute;
            top: 50px;
            bottom: 10px;
            left: 0px;
            right: 0px;
        }
        
        .inline {
            display: inline-block;
        }
        
        .left-editor-block,
        .right-editor-block {
            vertical-align: top;
            height: 100%;
        }
        
        .left-editor-block {
            width: 30%;
            text-align: left;
        }
        
        .right-editor-block {
            width: 69%;
        }
        
        .flex {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }
        
        .editor-header {
            text-align: center;
            margin: 10px;
            font-size: 1.1rem;
        }
        
        .editor {
            width: 100%;
            border: 1px solid grey;
            flex-grow: 1;
            margin-right: 5px;
        }
        
        iframe {
            width: 100%;
            height: 100%;
            border-width: 0px;
        }
        
        .tool {
            margin: 10px;
            height: 27px;
        }
    </style>
    <script src="https://7072-prd-ffx26-1255301037.tcb.qcloud.la/321zou.com/dsl/jquery/jquery-3.5.1.min.js?v=238619"></script>
    <script src="https://7072-prd-ffx26-1255301037.tcb.qcloud.la/321zou.com/dsl/monaco-editor/min/vs/loader.js"></script>
</head>

<body>
    <div class="header">
        <span>DSL集成开发环境(DSL IDE)-v0.2.3</span>
    </div>

    <div class="main">
        <div class="inline left-editor-block">
            <div class="flex">
                <div class="editor-header"><span>语法(Grammar)</span></div>
                <!-- <div class="tool"> -->
                <!-- <button onclick="">待定</button> -->
                <!-- </div> -->
                <div id="dslGrammar" class="editor inline"></div>
            </div>
        </div>
        <div class="inline right-editor-block">
            <iframe src="code.html"></iframe>
        </div>
    </div>

    <script>
        require.config({
            paths: {
                vs: 'https://7072-prd-ffx26-1255301037.tcb.qcloud.la/321zou.com/dsl/monaco-editor/min/vs'
            }
        });
        var dslGrammarEditor = null;
        require(['vs/editor/editor.main'], function() {

            $.get("/git/grammar-repo/opendsl/0.4/DSL.g4", function(g4) {
                dslGrammarEditor = monaco.editor.create(document.getElementById('dslGrammar'), {
                    value: g4,
                    language: 'yaml',
                    scrollBeyondLastLine: false,
                });
            });
        });

        function getDsl() {

            var value = dslGrammarEditor.getValue();
            return value;
        }
    </script>

    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?a44a91faad51b8b8a6abefeedf894dac";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</body>

</html>